<template>
	<div class="_wrapper _flex">
		<div id="mars3dContainer" class="_wrapper-y _flex-item-1"></div>
		<div class="_wrapper-y _box-scroll" style="width: 100px;">
			<button class="_btn-1" @click="setCameraView()">镜头高度1700000</button>
			<button class="_btn-1" @click="areaMask()">区域遮罩</button>
			<button class="_btn-1" @click="areaWall()">区域分割墙</button>
			<button class="_btn-1" @click="addImg()">增加贴图</button>
			<button class="_btn-1" @click="popup()">地图弹窗消息</button>
			<button class="_btn-1" @click="addLayer()">添加图层</button>
			<button class="_btn-1" @click="hideEarth()">隐藏地球</button>
			<!-- <button class="_btn-1" @click="draw()">图形绘制</button> -->
			<el-select @change="areaSelect">
				<el-option v-for="(item, _index) in areaEnum" :key="_index" :label="item.name" :value="item" />
			</el-select>

			<div class="_p10">
				<el-descriptions>
					<el-descriptions-item label="镜头信息">{{cameraView}}</el-descriptions-item>
				</el-descriptions>
				<div>
					<div class="_font-title">图层信息</div>
					<div>
						<div v-for="(item, _index) in layers" :key="_index">
							{{item.name + '-' + item.zIndex}}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import marsConfig from "./mars-config.js";
	import ToolMars from "./tool-mars";
	import krigingConfig from "./krigingConfig.js";
	import kriging from "./kriging.min.js";
	import FactoryPolygons from "./factory/factory-polygons.js";
	import LayerArea from "./layer/layer-area.js";
	import ToolData from "./tool/tool-data.js";

	let toolMark;
	export default {
		data() {
			return {
				cameraView: "",
				layers: [],
				areaEnum: Object.entries(FactoryPolygons).map(item => item[1])
			}
		},
		mounted() {
			ToolMars.init().then(obj => {
				toolMark = obj;
				setInterval(() => {
					this.cameraView = toolMark.getCameraView();
					this.layers = toolMark.layer();
				}, 1000);
			});

			// 隐藏侧边及头部
			this.$toolUni.hideWindow();
		},
		methods: {
			hideEarth() {
				toolMark.hideEarth();
			},
			areaSelect(item) {
				LayerArea.initArea("100000", item.style());
			},
			popup() {
				toolMark.popup();
			},
			addImg() {
				toolMark.addImg();
			},
			areaMask() {
				toolMark.areaMask();
			},
			areaWall() {
				toolMark.areaWall();
			},
			setCameraView(options = {}) {
				toolMark.setCameraView(options);
			},
			addLayer() {
			}
		},
	}

</script>

<style>
	.mars3d-container {
		width: 100%;
		height: 80%;
	}
	.uni-app--showleftwindow {
		display: none;
	}
	.uni-app--showtopwindow {
		display: none;
	}
</style>
